<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    </head>
    <body>
        
        <div id="app-one">
            <h2>{{title}}</h2>
            <p>{{say}}</p>
        </div>
        <div id="app-two">
            <h2>{{title}}</h2>
            <p>{{say}}</p>
            <button v-on:click="changeTitle">改变第一个对象中title属性</button>
        </div>
        <script>
           var one=new Vue({
               el:'#app-one',
               data:{
                   title:'app-one的内容'
               },
               computed:{
                   say:function(){
                       return 'Hello One';
                   }
               }
           });
           var two=new Vue({
               el:'#app-two',
               data:{
                   title:'app-two的内容'
               },
               methods:{
                    changeTitle:function(){
                        one.title='已经改名了！';
                    }
               },
               computed:{
                   say:function(){
                       return 'Hello Two';
                   }
               }
           })


        </script>
    </body>
</html>